<template>
	<view class="content">
		<view class="nav">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image v-if="userInfo.avatarUrl" class="avater" :src="userInfo.avatarUrl" alt="" />
				<image v-else class="avater" src="@/static/mr.png" alt="" />
			</button>
			<view class="">
				<p class="user">
					<!-- #ifdef APP -->
					<input :disabled="userInfo.nickname" v-model="userInfo.nickname" type="nickname" class="weui-input" placeholder="请输入昵称"
						@change="getUserInfo" />
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<input :disabled="userInfo.nickName" v-model="userInfo.nickName" type="nickname" class="weui-input" placeholder="请输入昵称"
						@change="getUserInfo" />
					<!-- #endif -->
				</p>
				<p class="phone">{{ userInfo.phone }}</p>
			</view>
		</view>
		<view class="logout" @click="promoteQRcode">
			<image src="/static/ewm.png" alt="" />
			推广二维码
		</view>
		<view class="logout1" @click="giveaway">
			<image src="/static/liwu.png" alt="" />
			赠品
		</view>
		<view class="logout" @click="lottery">
			<image src="/static/lot.png" alt="" />
			抽奖次数剩余：{{drowsNum||0}}次
		</view>
		<view class="logout" @click="coupon">
			<image src="/static/yhq.png" alt="" />
			我的优惠券
		</view>
		<view class="logout" @click="logout">
			<image src="/static/back.png" alt="" />
			退出登录
		</view>
		
		<!-- <view class="almost-lottery__action-dev" @tap="handleOpenPopup">
		  <text class="text">打开抽奖转盘</text>
		</view> -->
		
		<uni-popup ref="alertDialog" type="dialog" style="zindex: 10000">
			<uni-popup-dialog cancelText="取消" confirmText="确定" content="是否确定退出登录" @confirm="dialogConfirm"
				@close="dialogClose" />
		</uni-popup>
		
		
	</view>
</template>

<script>
	// import axios from 'axios'
	import {
		userDrowsNum, userGiftCount
	} from '@/api/user'
	export default {
		components: {
			 
		},
		onLoad() {
			let token = uni.getStorageSync('X-Access-Token') ? true : false
			if (!token) {
				uni.navigateTo({
					url: '/pages/index/index',
				})
			}
		},
		onShow() {
			// userDrowsNum({openId:uni.getStorageSync('user').userId}, 'get')
			// .then((res) => {
			// 	console.log(res.code)
			// 	if(!res){
			// 		this.drowsNum = res;
			// 	}
				
			// })
		},
		data() {
			return {
				userInfo: uni.getStorageSync('user'),
				role: [],
				dingFlag: true,
				winWidth: 100,
				winHeight: 100,
				QRcodeSrc: '',
				showQrcode: false,
				url: '',
				value: '',
				// 开启调试模式
				isDev: true,
				drowsNum:0,
			}
		},
		created() {
			console.log(this.userInfo.nickName);
		},
		methods: {
			
			onChooseAvatar(e) {
				this.userInfo.avatarUrl = e.detail.avatarUrl
				let userInfo = uni.getStorageSync('user')
				userInfo.avatarUrl = e.detail.avatarUrl
				uni.setStorageSync('user', userInfo);

			},
			getUserInfo(e) {
				this.userInfo.nickName = e.detail.value
				let userInfo = uni.getStorageSync('user')
				userInfo.nickName = e.detail.value
				uni.setStorageSync('user', userInfo);
			},
			// 推广二维码
			promoteQRcode() {
				uni.$tui.href('/pages/myPage/share');
			},
			giveaway() {
				userGiftCount({},'get')
				.then((res)=>{
					// console.log(res)
					uni.setStorageSync('user_count',res.data)
				}).catch((err)=>{
					console.log(err)
				})
				uni.$tui.href('/pages/giveaway/giveaway');
			},
			coupon() {
				uni.$tui.href('/pages/coupon/home');
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			lottery(){
				uni.$tui.href('/pages/myPage/lottery');
			},
			dialogConfirm() {
				uni.clearStorage()
				this.$refs.alertDialog.close()
				uni.navigateTo({
					url: '/pages/index/index',
				})
			},
			logout() {
				this.$refs.alertDialog.open()
			},
		},
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 14px;
		background-color: #ffffff;
		height: -webkit-fill-available;

		.nav {
			box-shadow: 0px 0px 4px 0px rgba(96, 112, 138, 0.05);
			border-radius: 8px;
			background-color: #fff;
			display: flex;

			.avater {
				width: 64px;
				height: 64px;
				border-radius: 8px;
				border: 2px solid #ffffff;
			}

			.user {
				margin-left: 20px;
				padding-top: 10px;
				font-size: 16px;
				font-weight: 500;
				color: #000000;
			}

			.phone {
				margin-left: 20px;
				padding-top: 10px;
				font-size: 16px;
				font-weight: 500;
				color: #000000;
			}
		}

		.role {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30px;
			margin-left: 14px;

			p {
				font-size: 12px;
				border-radius: 4px;
				border: 1px solid #e0e2e4;
				padding: 2px 4px;
				margin-right: 4px;
				margin-bottom: 4px;
			}
		}
	}

	.logout {
		display: flex;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #eaeaea;
		font-size: 16px;

		image {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}
	}
	.logout1 {
		display: flex;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #eaeaea;
		font-size: 16px;
	
		image {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}
	}
</style>